<template>
	<view class="container">
		<HeaderTop>大麦空间</HeaderTop>
		<view class="banner-box">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true">
				<swiper-item v-for="url in swiperList" :key="url.imageUrl">
					<img mode='widthFix' style="width: 100%; height: 100%; border-radius: 16rpx" :src="url.imageUrl"
						alt="" srcset="" />
				</swiper-item>
			</swiper>
			<!-- <img style="width: 100%;height: 560rpx;" :src="baseURL + '/static/home-banner.png'" alt=""> -->
		</view>
		<view style="padding: 20rpx 40rpx;"><u-button @click="myClick" color="#226ae3" type="primary"
				text="我的空间"></u-button></view>

		<view class="header-tab-box">
			<!-- <view class="btn-box" @click="questionnaireClick">
				<view class="img-box">
					<img :src="baseURL + '/static/space/icon-dcwj.png'" alt="" />
				</view>
				<view> 调查问卷 </view>
			</view> -->
			<!-- 	<view class="btn-box" @click="signInClick">
				<view class="img-box">
					<img :src="baseURL + '/static/space/icon-dkqd.png'" alt="" />
				</view>
				<view> 打卡签到 </view>
			</view> -->
			<!-- 		<view class="btn-box" style="position: relative;" @click="inviteFriendsClick">
				<view class="img-box">
					<img :src="baseURL + '/static/space/icon-yqhy.png'" alt="" />
				</view>
				<view>
					邀请好友
				</view>
				<u-button :hairline="false" :customStyle="{
				  border: 'none',
				  padding: '0 !important',
				  height: '100%',
				  width:'100%',
				  opacity:'0',
				  position: 'absolute',
				}" open-type="share" text="邀请好友"></u-button>
			</view> -->
			<!-- <view class="btn-box" @click="myClick">
				<view class="img-box">
					<img :src="baseURL + '/static/space/icon-wdkj.png'" alt="" />
				</view>
				<view> 我的空间 </view>
			</view> -->
		</view>
		<view class="content-box">
			<!-- height: calc(100vh - 120px) -->
			<scroll-view style="" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="space-list" v-if="forceRefresh">
					<view class="space-item" v-for="item in dynamicList" :key="item" @click="detailClick(item)">
						<view class="box-bg">
							<view class="img-list">
								<view class="img-item">
									<img :src="
							  item.coverImage
							    ? item.coverImage
							    : baseURL + '/static/error.png'
							" alt="" />
								</view>
							</view>
							<view class="content-text">
								{{ item.title }}
							</view>
							<view class="header-box">
								<view class="header-left">
									<view class="header-sculpture-box">
										<img :src="item.weAvatar" alt="" />
									</view>
									<view style="font-size: 24rpx">
										{{ item.weUserName }}
									</view>
								</view>
								<view class="header-right">
									<view style="
																	display: flex;
																	font-size: 24rpx;
																	align-items: center;
																	margin-right: 20rpx;
																  ">
										<view v-if="item.isLike === 'N'">
											<u-icon size="36rpx" name="heart"></u-icon>
										</view>
										<view v-else>
											<u-icon color="#e45656" name="heart-fill" size="36rpx"></u-icon>
										</view>
										{{ item.likeQuantity }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 100rpx">
					<u-loadmore :status="status" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		dynamic
	} from "@/api/axios/Space.js";
	import {
		list,
	} from "@/api/axios/Home.js";
	import HeaderTop from '@/components/header-top/index.vue'
	export default {
		data() {
			return {
				openId: "",
				visitOpenId: "",
				baseURL: this.staticURL,
				pageNo: 1,
				pageSize: 20,
				dynamicList: [],
				status: "loadmore",
				forceRefresh: true,
				swiperList: [],
			};
		},
		components: {
			HeaderTop
		},
		onShareAppMessage() {
			this.clue({
				action: '1',
				eventType: '1',
			})
			return {
				title: '自定义转发标题',
				path: '/pages/Login/index',
			}
		},
		methods: {
			scrolltolower() {
				let _this = this;
				if (this.status !== "nomore" && this.status !== "loading") {
					this.status = "loading";
					dynamic({
						params: {
							openId: this.openId,
							queryType: "1",
							pageNo: this.pageNo,
							pageSize: this.pageSize,
						},
					}).then((res) => {
						_this.dynamicList = _this.dynamicList.concat(res.records);
						if (res.records.length > _this.pageSize) {
							_this.pageNo = _this.pageNo + 1;
							_this.status = "loadmore";
						} else {
							_this.status = "nomore";
						}
						console.log(_this.status);
					});
				}
			},
			questionnaireClick() {
				uni.navigateTo({
					url: "/pages-space/Questionnaire/index",
				});
			},
			signInClick() {
				uni.navigateTo({
					url: "/pages-space/SignIn/index",
				});
			},
			myClick() {
				uni.navigateTo({
					url: "/pages-space/MySpace/index",
				});
			},
			detailClick(item) {
				item.likeQuantity = item.likeQuantity.toString();
				// let data = uni.$u.queryParams(item)
				uni.navigateTo({
					url: "/pages-space/SpaceDetail/index?id=" + item.id,
				});
			},
			inviteFriendsClick() {},
		},
		created() {
			let _this = this;

			list({
				params: {
					status: 0,
				},
			}).then((res) => {
				if (res.length > 0) {
					_this.swiperList = res;
				} else {
					_this.swiperList = [{
						imageUrl: this.baseURL + '/static/home-banner.png'
					}]
				}

			});

		},
		onShow() {
			let _this = this;
			this.status = "loading";
			let openId = uni.getStorageSync("openId");
			this.openId = openId;
			dynamic({
				params: {
					openId,
					queryType: "1",
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				},
			}).then((res) => {
				_this.dynamicList = res.records;
				if (_this.dynamicList.length > _this.pageSize) {
					_this.pageNo = _this.pageNo + 1;
					_this.status = "loadmore";
				} else {
					_this.status = "nomore";
				}
			});
		},
		mounted() {

			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"],
			});
		},
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>